<script setup>
import { ref,onMounted, onBeforeUnmount,watch  } from 'vue';
import { topicStore } from '@/store/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
//import{getTopicPage} from '@api/Topic.js'
const router = topicStore()
const timeShow=ref(true)
const user =  ref(JSON.parse(localStorage.getItem('userObj')));

const timer = ref(0);

const startTimer = () => {
  setInterval(() => {
    if (router.isTimerRunning) {
      timer.value += 1;
    }
  }, 1000);
};





const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;

  const formattedHours = String(hours).padStart(2, '0');
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(remainingSeconds).padStart(2, '0');

  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
};

router.formattedTime = ref('00:00:00');

onMounted(() => {
  startTimer();
});

onBeforeUnmount(() => {
  clearInterval(timer);
});

// 每当 timer 变化时更新 formattedTime
watch(timer, () => {
  router.formattedTime = formatTime(timer.value);
});


// 退出登录
const goLogin=()=>{
  ElMessageBox.confirm(
    '确认要提出吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
      router.push('/login')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功',
      })
    })
}
</script>

<template>
  <div class="header">
    <div class="header_title">混凝土配合比答题实验</div>
    <div v-if="user.job =='0'" v-show="timeShow" class="header_text">{{router.formattedTime}}</div>
    <div class="header_exit">
      <p v-if="user.job =='1'">你好，{{ user.accounts }}老师</p>
      
      <p v-else>你好，{{ user.accounts }}同学</p> 
      <img src="@/assets/exit.png" @click="goLogin" style="width: 48px;height: 48px;margin-left: 11px;" alt="">
    </div>
  </div>
</template>

<style scoped lang="scss">
  .header{
    display: flex;
    padding: 26px 41px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-color: #166262;
    .header_title{
      font-weight: bold;
      font-size: 30px;
    }
    .header_text{
      font-size: 18px;
    }
    .header_exit{
      display: flex;
      align-items: center;
    }
  }
</style>